<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/jquery-3.4.1.min.js"></script>
    <script src="/lib/layui-v2.5.5/layui.js"></script>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">

    <style>
        div {
            text-align: center;
        }
    </style>

</head>
<body>
<div>
    <span id="time"></span>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="add()">+</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="sub()">-</button>
    <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray" id="count"></span></button>
</div>

<script>
    // 获取当前时间对象
    function getTime() {
        let now = new Date();
        return {
            hours: now.getHours(),
            minutes: now.getMinutes(),
            seconds: now.getSeconds()
        };
    }

    // 格式化时间，将时、分、秒补齐两位数
    function formatTime(time) {
        return (time < 10 ? '0' : '') + time;
    }

    // 更新时钟显示
    function updateClock() {
        let time = getTime();
        let clockDiv = document.getElementById('time');
        clockDiv.innerHTML = "当前时间：" + formatTime(time.hours) + ':' + formatTime(time.minutes) + ':' + formatTime(time.seconds);
    }

    // 每秒钟更新一次时钟
    updateClock();
    setInterval(updateClock, 1000);

    let socket = new WebSocket("ws://localhost:8080/websocket");

    socket.onmessage = function (event) {
        $("#count").text(event.data);
    };

    function add() {
        $.ajax({
            url: '/add', // 请求的 URL
            type: 'GET', // 请求方法：GET、POST 等
            dataType: 'json', // 预期服务器返回的数据类型
        });
    }

    function sub() {
        $.ajax({
            url: '/sub', // 请求的 URL
            type: 'GET', // 请求方法：GET、POST 等
            dataType: 'json', // 预期服务器返回的数据类型
        });
    }

</script>
</body>
</html>
